<template>
  <div class="menbermain">
    <div class="menbermain-center">
      <el-tabs v-model="activeName" class="tabPane" stretch>
        <el-tab-pane label="个人注册" class="tabPane" name="first">
          <div v-if="true" class="card">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-position="left"
            >
              <el-form-item prop="nickname">
                <el-input
                  v-model="ruleForm.nickname"
                  prefix-icon="iconfont icon-zhanghao7"
                  placeholder="请输入姓名"
                ></el-input>
              </el-form-item>
              <el-form-item prop="phone">
                <el-input
                  v-model="ruleForm.phone"
                  placeholder="请输入11位手机号码"
                  maxlength="11"
                >
                  <template slot="prepend"
                    >+86 <img src="@/assets/imgs/选择.png" alt="" />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  prefix-icon="iconfont icon-mima"
                  v-model="ruleForm.password"
                  placeholder="6~32位密码,注意区分大小写"
                  type="password"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password_confirmation">
                <el-input
                  prefix-icon="iconfont icon-mima"
                  v-model="ruleForm.password_confirmation"
                  placeholder="请确认密码"
                  type="password"
                >
                </el-input>
              </el-form-item>

              <div class="login-btn">
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >提交</el-button
                >
              </div>
            </el-form>
          </div>
          <div v-else>不可添加</div>
        </el-tab-pane>
        <el-tab-pane class="tabPane" label="公司注册" name="second">
          <el-form
            :model="ruleFormSector"
            :rules="ruleSector"
            ref="ruleFormSector"
            label-position="left"
          >
            <div class="card">
              <el-form-item prop="title">
                <el-input
                  prefix-icon="iconfont icon-gongsimingcheng2"
                  v-model="ruleFormSector.title"
                  placeholder="公司名称(与公章公司名称一致)"
                ></el-input>
              </el-form-item>
              <el-form-item prop="certificate">
                <el-input
                  prefix-icon="iconfont icon-yanzhengma"
                  v-model="ruleFormSector.certificate"
                  placeholder="请输入公司社会信用代码"
                ></el-input>
              </el-form-item>
              <el-form-item prop="phone">
                <el-input
                  v-model="ruleFormSector.phone"
                  placeholder="请输入11位手机号码"
                  maxlength="11"
                  ><template slot="prepend"
                    >+86 <i class="el-icon-arrow-down"></i> </template
                ></el-input>
              </el-form-item>
              <el-form-item prop="auth_book">
                <el-row :gutter="20" style="margin-right: 0px">
                  <el-col
                    :span="16"
                    style="padding-left: 0px; padding-right: 0px"
                  >
                    <el-input
                      class="limitLength"
                      prefix-icon="iconfont icon-shouquanshu"
                      v-model="ruleFormSector.auth_book"
                      placeholder="授权书"
                    ></el-input>
                  </el-col>
                  <el-col :span="8" style="padding-left: 0; margin-left: -2px">
                    <el-upload
                      class="upload-demo"
                      action="/api/attachment/upload"
                      :show-file-list="false"
                      ref="upload"
                      :headers="headers"
                      :on-success="handleSuccess"
                    >
                      <el-button
                        class="uploadBtn"
                        size="small"
                        type="warning"
                        icon="iconfont icon-shangchuan2"
                        >上传</el-button
                      >
                    </el-upload>
                  </el-col>
                </el-row>
                <el-button type="warning" size="small" @click="aDown"
                  >下载</el-button
                >
              </el-form-item>
              <div class="login-btn">
                <el-button
                  type="primary"
                  @click="submitCompanyForm('ruleFormSector')"
                  >提交</el-button
                >
              </div>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import api from "../../api/login/index";
import { storeCompanyAndUser } from "../../api/company";
export default {
  data() {
    let valitPhone = (rule, value, callback) => {
      let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!myreg.test(value)) {
        callback(new Error("请输入合法手机号"));
      } else {
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      /* 个人注册表单数据 */
      ruleForm: {
        nickname: "",
        phone: "",
        password: "",
        password_confirmation: "",
      },

      headers: {
        Authorization: localStorage.getItem("token"),
      },
      /* 个人注册表单焦点 */
      rules: {
        nickname: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        phone: [
          {
            validator: valitPhone,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 32,
            message: "长度在 6 到 32 个字符",
            trigger: "blur",
          },
        ],
        password_confirmation: [
          {
            validator: validatePass2,
            trigger: "blur",
          },
        ],
      },
      /* 判断状态 */
      activeName: "first",
      /* 公司注册表单 */
      ruleFormSector: {
        /* nickname: "", */
        title: "",
        certificate: "",
        phone: "",
        auth_book: "",
      },
      /* 公司注册失焦判断 */
      ruleSector: {
        /*   nickname: [
          {
            required: true,
            message: "请选择委托人",
            trigger: "change",
          },
        ], */
        title: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur",
          },
        ],
        certificate: [
          {
            required: true,
            message: "公司社会信用代码",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        auth_book: [
          /* {
            required: true,
            message: "请上传授权书",
            trigger: "change",
          }, */
        ],
      },
    };
  },
  methods: {
    // 授权书下载
    aDown() {
      let host = localStorage.getItem("host");
      let link = document.createElement("a");
      link.setAttribute("href", host + "/api/index/example_template?type=2");
      link.setAttribute("download", `下载授权书模板`);
      link.click();
    },
    // 授权书上传
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
      this.$message({
          showClose: true,
            duration: 3000,
        message: response.msg,
        type: "success",
      });
      this.ruleFormSector.auth_book = response.data.file;
    },
    //个人注册
    submitForm(formName) {
      console.log(this.ruleForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let send = JSON.parse(JSON.stringify(this.ruleForm));
          api.register(send).then((res) => {
            if (res.data.code === 200) {
              this.$message({
          showClose: true,
            duration: 3000,
                message: res.data.msg,
                type: "success",
              });
              this.$refs[formName].resetFields();
            } else {
              this.$message({
          showClose: true,
            duration: 3000,
                message: res.data.msg,
                type: "error",
              });
            }
          });
        }
      });
    },
    //注册公司账号
    submitCompanyForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //console.log(this.ruleFormSector);
          let res = await storeCompanyAndUser(this.ruleFormSector);
          //console.log(res);
          if (res.data.code === 200) {
            this.$message({
          showClose: true,
            duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.$refs[formName].resetFields();
            this.ruleFormSector.nickname = "";
          } else {
            this.$message({
          showClose: true,
            duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
      });
    },
  },
  created() {
    if (this.$route.query.id == 2) {
      this.activeName = "first";
    } else if (this.$route.query.id == 1) {
      this.activeName = "second";
    }
  },
};
</script>

<style scoped lang="less">
/deep/.el-tabs__item.is-active {
  background-color: #3963fd;
  color: #fff;
}
/deep/.el-tabs__item:hover {
  color: none;
}

.login-btn {
  display: flex;
  justify-content: space-around;
}

.login-btn button {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
}
.menbermain {
  width: "100%";
  height: "100%";
  position: relative;
}
.menbermain-center {
  width: 80%;
  height: 80%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #fff;
}
/deep/
  .el-form-item.is-required:not(.is-no-asterisk)
  > .el-form-item__label:before {
  display: none;
}
/deep/.el-tabs__content {
  padding: 15px 0;
  background-color: #fff;
}
/deep/.el-input__icon {
  color: #3963fd;
}
.card {
  width: 31%;
  margin: 0 auto;
}

/deep/.el-input--suffix .el-input__inner {
  padding-right: 90px;
}
/deep/.el-button {
  padding: 11px 10px;
  margin-left: 0;
}

/deep/.el-tabs__active-bar {
  width: 0 !important;
}
.el-select {
  width: 100%;
}
.tabPane {
  width: 100%;
  .el-input {
    width: 100%;
  }
}
//受授权
/deep/.el-col-8 {
  width: 10.3333333%;
}

//选择审批人
/deep/.el-dialog__body {
  padding: 7px 10px;
}
/deep/.el-row {
  width: 85%;
}
/deep/.el-form-item__content {
  display: flex;
  justify-content: space-between;
}
/deep/ .el-col-16 {
  width: 73.6666%;
}
</style>